<script setup>
// import { throttle } from '@/utils'
import { onMounted, ref } from "vue";
import { saveAs } from "file-saver";
/*画板相关变量*/
//因为这些变量全局各个模块都要用到所以置顶
let float = null;
let floatCtx = null;
let sign = null;
let signCtx = null;
let main = null;
let mainCtx = null;
let left = ref(0);
let top = ref(0);
let floatShow = ref(false);

// 后端数据
const data = {
  baseUrl: "/api/public/back.png",
  size: {
    width: 600,
    height: 400,
  },
};

/*主画板和其他相关变量*/
onMounted(() => {
  // 获取主画板并且初始化为canvas画布
  main = document.getElementById("main");
  mainCtx = main.getContext("2d");
  // 绘制付款单图片为背景
  drawImageAdBg();
});
// 绘制付款单图片为背景
const drawImageAdBg = () => {
  const img = new Image();
  // 这行很重要，表明请求的图片可以进行跨域访问
  img.crossOrigin = "Anonymous";
  img.src = data.baseUrl;
  img.onload = function () {
    mainCtx.drawImage(img, 0, 0, data.size.width, data.size.height);
  };
};
const save = () => {
  mainCtx.drawImage(float, left.value, top.value, float.width, float.height);
  let base64 = main.toDataURL();
  floatShow.value = false;
  // 下载图片到本地
  // saveAs(base64, 'back.jpeg')
};
const backInit = () => {
  mainCtx.clearRect(0, 0, main.width, main.height);
  drawImageAdBg();
  floatShow.value = false;
};

/*签名板和相关变量*/
let canSign = false;
let lineWidth = 5;
let strokeStyle = "red";
let signMode = "sign"; // 签名模式
onMounted(() => {
  // 获取签名画板并且初始化为canvas画布
  sign = document.getElementById("sign");
  signCtx = sign.getContext("2d");
});
const signMouseDown = (e) => {
  canSign = true;
  signCtx.beginPath();
  //  鼠标按下的时候决定画线的起点
  signCtx.moveTo(e.offsetX, e.offsetY);
  signCtx.lineWidth = lineWidth;
  signCtx.strokeStyle = strokeStyle;
};
const signMouseMove = (e) => {
  if (canSign) {
    if (signMode === "sign") {
      //  鼠标按下的时候决定画线的起点
      signCtx.lineTo(e.offsetX, e.offsetY);
      signCtx.stroke();
    } else if (signMode === "clear"){
        signCtx.clearRect(e.offsetX, e.offsetY, 20, 20)
    }
  }
};
const signMouseUp = (e) => {
  canSign = false;
};
const clearSign = () => {
  signCtx.clearRect(0, 0, sign.width, sign.height);
  signMode = "sign"
};
const sendSignToFloat = () => {
  floatCtx.drawImage(sign, 0, 0, float.width, float.height);
  floatShow.value = true;
};

/*签名悬浮板相关逻辑*/
onMounted(() => {
  // 获取悬浮板画板并且初始化为canvas画布
  float = document.getElementById("float");
  floatCtx = float.getContext("2d");
});

/*拖拽相关代码*/
let cursor = ref("default");
let drag = false;
//鼠标按下点和拖拽元素的X、Y距离
let distanceX = 0,
  distanceY = 0;
const dragMouseDown = (e) => {
  drag = true;
  cursor.value = "move";
  distanceX = e.x;
  distanceY = e.y;
};
const dragMouseMove = (e) => {
  if (drag) {
    // 边界界定
    let _x = e.x - distanceX;
    let _y = e.y - distanceY;
    let max_x = main.width - float.width - 28;
    let max_y = main.height - float.height - 25;
    if (_x <= 0) {
      _x = 0;
    }
    if (_y <= 0) {
      _y = 0;
    }
    if (_x >= max_x) {
      _x = max_x;
    }
    if (_y >= max_y) {
      _y = max_y;
    }
    left.value = _x;
    top.value = _y;
  }
};
const dragMouseUp = (e) => {
  drag = false;
  cursor.value = "default";
};
</script>

<template>
  <div class="container">
    <div
      class="mainboard"
      :style="{
        width: data.size.width + 'px',
        height: data.size.height + 'px',
      }"
    >
      <!-- 主画板 -->
      <canvas
        id="main"
        :width="data.size.width"
        :height="data.size.height"
      ></canvas>
      <!-- 签名绘制浮层画板 -->
      <div
        v-show="floatShow"
        class="floatboard"
        :style="{ left: left + 'px', top: top + 'px', cursor: cursor }"
        @mousedown="dragMouseDown"
        @mouseup="dragMouseUp"
        @mousemove="dragMouseMove"
      >
        <canvas id="float" width="200" height="80"></canvas>
      </div>
      <button @click="save">保存</button>
      <button @click="backInit">清除</button>
    </div>
    <div class="signboard">
      <!-- 签名画板 -->
      <canvas
        id="sign"
        width="400"
        height="400"
        @mousedown="signMouseDown"
        @mousemove="signMouseMove"
        @mouseup="signMouseUp"
      ></canvas>
      <div class="signButtons">
        <button @click="clearSign">清除</button>
        <button @click="sendSignToFloat">确认</button>
        <button @click="() => {signMode = 'clear'}">橡皮擦</button>
        <button @click="() => {
            signMode = 'sign'; strokeStyle = 'blue'; 
        }">蓝色笔</button>
        <button @click="() => {
            signMode = 'sign'; strokeStyle = '#000'; 
        }">黑色笔</button>
        <button @click="() => {
            signMode = 'sign'; lineWidth = 10; 
        }">大色笔</button>
        <button @click="() => {
            signMode = 'sign'; lineWidth = 2; 
        }">小色笔</button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.mainboard {
  border: 2px solid red;
  position: relative;
  .floatboard {
    position: absolute;
    border: 1px solid #000;
    line-height: 0;
  }
}
.signboard {
  border: 2px solid #000;
  position: relative;
  .signButtons{
    position: absolute;
    right: 0;
    bottom: -30px;
  }
}
</style>
